<template>
  <div ref="barEchart" class="baseChart"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
// import type { BaseOptionType } from './optionPropsType'
type ProPick<T, K extends keyof T> = NonNullable<T[K]>
interface BaseOptionType {
  echarts?: any
  options?: {
    xAxis?: any
    yAxis?: any
    series: any[]
    [key: string]: any
  }
  optionsFunc?(echarts?: any,targetEcharts?:any): ProPick<BaseOptionType, 'options'>
}
// props
// 定义参数类型
const props = defineProps<BaseOptionType>()
// 初始化echarts
const barEchart = ref()
onMounted(() => {
  let baseChart = props.echarts.init(barEchart.value)
  //   两种配置
  if (props.optionsFunc) {
    // 传入echarts和初始化后的实例
    baseChart.setOption(props.optionsFunc(props.echarts,baseChart))
  }
  // 如果直接是个对象 直接传入使用
  if (props.options) {
    baseChart.setOption(props.options)
  }
})
</script>
<style scoped>
.baseChart {
  width: 100%;
  height: 100%;
}
</style>

